<script>
import answerInput from "./answerInput.vue";
import { cloneDeep, handleUrlParams, showToast } from "@/utils";
import userAnswer from "./userAnswer.vue";
import Title from "../title.vue";
import controlBar from "./controlBar.vue";

export default {
  name: "writing",
  components: { Title, answerInput, userAnswer, controlBar },
  props: {
    viewAnalysis: {
      type: Boolean,
      default: false,
    },
    details: {
      type: Object,
      default: null,
    },
  },
  computed: {
    writing() {
      return this.details && this.details.writing ? this.details.writing : {};
    },
  },
  data() {
    return {
      showAnalysis: false,
      inputForm: {
        userAnswer: "",
        userAnswerImage: "",
      },
    };
  },
  methods: {
    handleUrlParams,
    submit() {
      if (!this.inputForm.userAnswer && !this.inputForm.userAnswerImage) {
        showToast.default("请先作答");
        return;
      }
      this.$emit("submit", {
        questionList: [this.inputForm],
        //暂时无法评分，先写死分数为0
        userDoTopicScore: {
          totalTopicNum: 1,
          rightTopicNum: 0,
          errorTopicNum: 0,
          noDoNum: 0,
          score: 0,
          isCalculateScore: 0, //暂不评分
        },
      });
    },
  },
  inject: ["root"],
};
</script>

<template>
  <view class="component">
    <title :topic-name="details.topicName"></title>
    <slot></slot>
    <!--		题目解析-->
    <view class="analysis" v-if="viewAnalysis">
      <view class="btn-container" v-if="!showAnalysis">
        <view class="btn" @click="root.checkIsVip() && (showAnalysis = true)"
          >查看解析
				</view>
      </view>
      <template v-else>
        <view class="content">
          <view v-html="details.analysis"></view>
        </view>
        <view
          class="content"
          v-if="
            details.writing.textContent && details.writing.textContent.content
          "
        >
          <view class="label">
            <view class="point"></view>
            <view>参考范文</view>
          </view>
          <view v-html="details.writing.textContent.content"></view>
        </view>
        <view
          class="content"
          v-if="
            details.writing.textContent && details.writing.textContent.trans
          "
        >
          <view class="label">
            <view class="point"></view>
            <view>范文翻译</view>
          </view>
          <view v-html="details.writing.textContent.trans"></view>
        </view>
      </template>
    </view>
    <!--		答题区域-->
    <view style="margin-top: 30rpx">
      <!--			作答-->
      <answerInput v-if="!viewAnalysis" :input-form.sync="inputForm" />
      <!--			作答记录 查看-->
      <userAnswer :details="writing" v-else></userAnswer>
    </view>
    <!--		底部控制按钮-->
    <view class="placeholder"></view>
		<control-bar :view-analysis="viewAnalysis" @submit="submit"></control-bar>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 30rpx;
  > .analysis {
    margin-top: 30rpx;
    .btn-container {
      display: flex;
      justify-content: flex-end;
      .btn {
        font-size: calc(30rpx * var(--font-size-rate));
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 30rpx;
        border-radius: 30rpx;
        background: var(--theme-color);
        width: max-content;
				color: var(--text-color-white);
      }
    }
    .content {
      border-radius: 30rpx;
      padding: 30rpx;
      border: 2rpx solid var(--text-color-theme);
      font-size: calc(30rpx * var(--font-size-rate));
      line-height: 2;
      &:not(:first-child) {
        margin-top: 30rpx;
      }
      > .label {
        display: flex;
        align-items: center;
        font-size: calc(32rpx * var(--font-size-rate));
        .point {
          width: 10rpx;
          height: 30rpx;
          background: var(--theme-color);
          margin-right: 20rpx;
        }
      }
    }
  }

  > .placeholder {
    height: calc(230rpx + env(safe-area-inset-bottom));
  }
}
</style>
